<template>
    <view class="box">
        <!-- 图片轮播 -->
        <view class="u-demo-block" v-if="dataDetail.hospitalPicture">
            <u-swiper
                :list="dataDetail.hospitalPicture"
                @change="(e) => (currentNum = e.current)"
                :autoplay="false"
                indicatorStyle="right: 40rpx"
                height="460rpx"
                radius="0"
                imgMode="aspectFit"
                @click="topImageClick"
            >
                <view slot="indicator" class="indicator-num">
                    <text class="indicator-num__text"
                        >{{ currentNum + 1 }}/{{
                            dataDetail.hospitalPicture &&
                            dataDetail.hospitalPicture.length
                        }}</text
                    >
                </view>
            </u-swiper>
            <view class="itemBox"
                ><view class="item">
                    <u-image
                        height="100rpx"
                        width="100rpx"
                        :src="dataDetail.logoUrl"
                        mode="aspectFill"
                        radius="10rpx"
                    />
                    <view class="celldetail-t">
                        <view class="goodName">{{ dataDetail.name }}</view>
                        <view class="celldetail_money">
                            <text v-for="v in dataDetail.hospitalLabel">{{
                                v
                            }}</text>
                        </view>
                    </view>
                </view>
                <u-line color="#F3F3F3"></u-line>
            </view>
            <view style="padding: 0 30rpx"
                ><u-gap height="18rpx" color="#F6F6F6" />
                <view class="timeBox1 flex_wrap">
                    <u-icon
                        name="clock"
                        color="#777777"
                        labelSize="32rpx"
                        label="营业时间"
                        labelColor="#3D3D3D"
                        space="10"
                        size="20"
                    ></u-icon>
                    <u--text
                        color="#777777"
                        size="28rpx"
                        block
                        margin="0 0 0 10rpx"
                        :text="`|  ${dataDetail.openingHours}`"
                    ></u--text>
                </view>
                <u-line color="#F3F3F3"></u-line>
                <view class="timeBox1"
                    ><u--text
                        prefixIcon="map"
                        iconStyle="font-size: 40rpx;margin-right:20rpx"
                        color="#777777"
                        size="14"
                        lines="1"
                        :text="dataDetail.address"
                    ></u--text>
                </view>
            </view>
        </view>
        <u-gap
            height="8"
            bgColor="#F6F6F6"
            marginTop="20"
            marginBottom="20"
        ></u-gap>
        <u-sticky bgColor="#fff">
            <u-tabs
                :current="currentTab"
                @change="tabChange"
                :scrollable="false"
                :list="list1"
                lineWidth="30"
                lineColor="#588BF3"
                :activeStyle="{
                    color: '#588BF3',
                    fontWeight: 'bold',
                    transform: 'scale(1.05)',
                }"
                :inactiveStyle="{
                    color: '#666666',
                    transform: 'scale(1)',
                }"
                itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
            ></u-tabs>
            <view class="contentBox">
                <view class="rightGoods" v-if="[0].includes(currentTab)">
                    <scroll-view
                        scroll-y="true"
                        class="whiteBox"
                        @scrolltolower="scrollBottom"
                    >
                        <block v-for="(item, index) in rowsList" :key="index">
                            <view class="item" @tap="to_goodsDetail(item.id)">
                                <u-image
                                    height="180rpx"
                                    width="180rpx"
                                    :src="item.thumbnail"
                                    mode="aspectFill"
                                    radius="10rpx"
                                />
                                <!-- <view class="">
								11111
							</view> -->
                                <view class="celldetail-t">
                                    <view class="goodName">{{
                                        item.goodsName
                                    }}</view>
                                    <view class="celldetail_money">
                                        <text style="font-size: 24rpx">￥</text>
                                        <text
                                            style="
                                                font-size: 34rpx;
                                                font-weight: 600;
                                            "
                                            >{{ goodsSkuListPrice(item) }}</text
                                        >
                                    </view>
                                </view>
                            </view>
                        </block>
                    </scroll-view>
                </view>
                <rich-text
                    :nodes="useInterest"
                    class="wrapper"
                    v-if="[1, 2].includes(currentTab)"
                ></rich-text
            ></view>
        </u-sticky>
    </view>
</template>

<script>
import { numDiv } from "@/js_sdk/nl-precisionNum/precisionNum.js";
import { formatDecimal } from "@/utils/index.js";
import {
    getHospitalList,
    listOfPhysicalExaminationProducts,
    getInfo,
} from "@/api/physical.js";
export default {
    data() {
        return {
            dataDetail: {},
            currentNum: 0,
            currentTab: 1,
            useInterest: "",
            rowsList: [],
            list1: [
                {
                    name: "套餐",
                },
                {
                    name: "医院介绍",
                },
                {
                    name: "医生介绍",
                },
            ],
            goodsData: {
                // 商品数据
                pageSize: 10,
                pageNum: 1,
                tenantId: "",
            },
            goodsTotal: 0, // 商品总数
            fromStore: false, //为真 从门店来
            hasMore: true,
        };
    },
    computed: {
        goodsSkuListPrice() {
            return (item) => {
                const money = item.minPrice || item.price;
                return formatDecimal(numDiv(money, 100));
            };
        },
    },
    onLoad(options) {
        this.productId = options.id;
        this.queryList(options.id);
    },

    methods: {
        async tabChange(e) {
            this.currentTab = e.index;
            if ([1, 2].includes(this.currentTab)) {
                this.useInterest =
                    this.currentTab === 1
                        ? this.formatRichText(this.dataDetail.richText)
                        : this.formatRichText(
                              this.dataDetail.hospitalDoctorText
                          );
            }
            if (this.currentTab === 0) {
                const { data, code } = await listOfPhysicalExaminationProducts({
                    bindOrNot: true,
                    hospitalId: this.productId,
                });
                if (code === 200) this.rowsList = data.rows;
            }
        },
        // 商品触底
        scrollBottom() {
            console.log("商品触底");
            if (this.hasMore) {
                this.goodsData.pageNum += 1;
                this.queryList();
            } else {
                uni.showToast({
                    title: "没有数据了",
                    icon: "none",
                });
            }
        },
        async queryList() {
            const result = await getInfo(this.productId);
            //   分页之后，数据拼接
            this.dataDetail = {
                ...result.data,
                hospitalLabel: result.data.hospitalLabel
                    ? result.data.hospitalLabel.split(",")
                    : [],
                hospitalPicture: result.data.hospitalPicture.split(","),
            };
            console.log(result.data, "this.dataList", this.dataDetail);
            this.useInterest =
                this.currentTab === 1
                    ? this.formatRichText(this.dataDetail.richText)
                    : this.formatRichText(this.dataDetail.hospitalDoctorText);
        },
        topImageClick() {
            const that = this;
            uni.previewImage({
                current: that.dataDetail?.hospitalPicture[that.currentNum],
                urls: this.dataDetail?.hospitalPicture,
                indicator: "number",
            });
        },
        onShareAppMessage(res) {
            this.closeShare();
            return {
                title: this.dataDetail.goodsName,
                imageUrl: this.dataDetail?.topImage[0] ?? "",
                path: "pages_shop/goods/index?id=" + this.productId,
            };
            console.log(path, "path");
        },
        onShareTimeline: function () {
            this.closeShare();
            return {
                title: this.dataDetail.goodsName,
                imageUrl: this.dataDetail?.topImage[0] ?? "",
                path: "pages_shop/goods/index?id=" + this.productId,
            };
        },
        to_goodsDetail(e) {
            uni.$u.route({
                url: `pages_shop1/goods/index?id=${e}`,
            });
        },
        //解析富文本方法
        formatRichText(html) {
            let newContent = html.replace(
                /<img[^>]*>/gi,
                function (match, capture) {
                    match = match
                        .replace(/style="[^"]+"/gi, "")
                        .replace(/style='[^']+'/gi, "");
                    match = match
                        .replace(/width="[^"]+"/gi, "")
                        .replace(/width='[^']+'/gi, "");
                    match = match
                        .replace(/height="[^"]+"/gi, "")
                        .replace(/height='[^']+'/gi, "");
                    return match;
                }
            );
            newContent = newContent.replace(
                /style="[^"]+"/gi,
                function (match, capture) {
                    match = match
                        .replace(/width:[^;]+;/gi, "max-width:100%;")
                        .replace(/width:[^;]+;/gi, "max-width:100%;");
                    return match;
                }
            );
            newContent = newContent.replace(/<br[^>]*\/>/gi, "");
            newContent = newContent.replace(/<p>/gi, "<br>");
            newContent = newContent.replace(
                /\<img/gi,
                '<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"'
            );
            return newContent;
        },
    },
};
</script>

<style lang="scss">
.box {
    height: 100vh;
    background-color: #fff;
}
.itemBox {
    padding: 0 30rpx;
    box-sizing: border-box;
    .item {
        display: flex;
        padding: 20rpx;
        .celldetail-t {
            width: 100%;
            padding: 0 6rpx 0 40rpx;
            box-sizing: border-box;

            .goodName {
                width: 100%;
                font-size: 40rpx;
                color: #3d3d3d;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                line-clamp: 1;
                -webkit-box-orient: vertical;
                font-weight: 600;
            }
            .celldetail_money {
                text {
                    color: #588bf3;
                    font-size: 24rpx;
                    font-weight: 400;
                    border: 1px solid #588bf3;
                    padding: 0rpx 6rpx;
                    border-radius: 8rpx;
                    margin-right: 10rpx;
                }
            }
        }
    }
}
.wrapper {
    white-space: pre-wrap;
    //   padding: 1rem;
}
.timeBox1 {
    margin: 24rpx 0;
}
.contentBox {
    padding: 20rpx 30rpx;
    box-sizing: border-box;
}
.rightGoods {
    box-sizing: border-box;

    .whiteBox {
        height: 100%;
        padding: 0 25rpx;
        box-sizing: border-box;

        .title {
            height: 77rpx;
            line-height: 77rpx;
            color: #2d2d2d;
            font-size: 26rpx;
            font-weight: bold;
        }

        .item {
            background-color: #fff;
            margin-bottom: 24rpx;
            border-radius: 16rpx;
            display: flex;
            padding: 12rpx;
            // box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.06);

            .celldetail-t {
                width: 100%;
                padding: 0 6rpx 0 12rpx;
                box-sizing: border-box;

                .goodName {
                    width: 100%;
                    font-size: 28rpx;
                    color: #333;
                    text-overflow: -o-ellipsis-lastline;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    line-clamp: 2;
                    -webkit-box-orient: vertical;
                    height: 80rpx;
                }

                .celldetail_money {
                    margin-top: 40rpx;
                    text {
                        color: #ff0000;
                        font-size: 18rpx;
                        font-weight: 400;
                    }
                }
            }
        }
    }
}
</style>
